<template>
  <div class="th-back" :style="{'left': thBackLeft +'px'}">
    <div class="nav-bar" @click="scrollToAnchor('dailyNews')">
      <img src="@/assets/images/th-back-icon1.png" alt="">
      <div>{{$t('HomeModuleTitle2')}}</div>
    </div>
    <div class="nav-bar" @click="scrollToAnchor('recommendProduct')">
      <img src="@/assets/images/th-back-icon2.png" alt="">
      <div>{{ $t('HomeModuleTitle3') }}</div>
    </div>
    <div class="nav-bar" @click="scrollToAnchor('recommendStore')">
      <img src="@/assets/images/th-back-icon3.png" alt="">
      <div>{{ $t('HomeModuleTitle4') }}</div>
    </div>
    <div class="nav-bar" @click="scrollToAnchor('hotProduct')">
      <img src="@/assets/images/th-back-icon4.png" alt="">
      <div>{{ $t('HomeModuleTitle5') }}</div>
    </div>
    <div class="nav-back" @click="scrollToTop">
      <img src="@/assets/images/th-back-icon5.png" alt="">
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
const thBackLeft = ref(0)
thBackLeft.value = (document.body.clientWidth - 1200) / 2 - 64
const scrollToTop = () => {
  window.scrollTo({ top: 0, behavior: 'smooth' })
}
const scrollToAnchor= (anchor) => {
  const el = document.getElementById(anchor);
  const offsetTop = el.offsetTop - 122
  if (el) {
    // el.scrollIntoView({ behavior: 'smooth' });
    window.scrollTo({top: offsetTop, behavior: 'smooth'})
  }
}
window.addEventListener('resize', () => {
  console.log('resize')
  thBackLeft.value = (document.body.clientWidth - 1200) / 2 - 64
})
</script>
<style scoped lang="scss">
.th-back{
  position: fixed;
  left: 2%;
  bottom: 100px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 2000;
  .nav-bar, .nav-back{
    font-size: 12px;
    width: 44px;
    height: 40px;
    color: #fff;
    background-color: #d8d8d8;
    display: flex;
    align-items: center;
    cursor: pointer;
    border-radius: 4px;
    margin-bottom: 4px;
    img{
      width: 28px;
      height: 28px;
      margin-left: 8px;
      margin-right: 8px;
      -o-object-fit: contain;
      object-fit: contain;
    }
  }
  & > div{
    transition: all .5s ease;
    &:nth-child(5){
      justify-content: center;
      background-color: var(--color-main);
    }
  }
}
.th-back .nav-bar div{
  padding: 0 5px;
  display: none;
}
.th-back .nav-bar:hover {
  width: 150px;
  background-color: var(--color-main);
}
.th-back .nav-bar:hover div {
  display: flex;
  justify-content: center;
  text-align: center;
  flex: 1;
  white-space: nowrap;
  color: #fff;
  animation: textAmin 1s ease;
}
@keyframes textAmin {
  0% {
    color: transparent
  }

  to {
    color: #fff
  }
}
</style>